<template>
	<view class="zh-address-add">
		<u-form>
			<u-input title="收件人" placeholder="填写收件人姓名" v-model="addressData.form.contactname" labelWidth="160" :rules="addressData.rules.contactname"></u-input>
			<u-input title="联系电话" placeholder="填写您的联系电话" v-model="addressData.form.contactphone" labelWidth="160" :rules="addressData.rules.contactphone"></u-input>
			<u-select title="收件地址" placeholder="所在地区" @click="pickArea" :value="addressData.pickAreaStr" labelWidth="160" :rules="addressData.rules.area"></u-select>
			<u-input title="详细地址" placeholder="如道路、门牌号、小区、楼栋号、单元..." v-model="addressData.form.address" labelWidth="160" :rules="addressData.rules.address"></u-input>
			<cell-item title="设为默认地址" :border="false" :arrow="false">
				<template v-slot:right>
					<switch checked color="#267CF8" @change="changeDefault" style="transform:scale(0.7)"/>
				</template>
			</cell-item>
		</u-form>
		<view class="bottom-fixed">
			<button class="app-primary-button" hover-class="app-primary-button-active" @click="save">确定</button>
		</view>
		<picker-area :show="pickAreaData.show" @close="changePickAreaShow" @pickOne="pickOne"></picker-area>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import { address } from '@/api'
	import { tip, util } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import type { AddressAddData } from '@/@type/address'
	import { AddressStatus, AddressIsdefault } from '@/enum/address'
	import { onLoad } from '@dcloudio/uni-app';
	
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const addressData: any = reactive({
		rules: {
			contactname:[{required:true,message:'请填写收件人姓名！'}],
			contactphone:[{required:true,message:'请填写联系电话！'}],
			province:[{required:true,message:'请填写所在地区！'}],
			city:[{required:true,message:'请填写所在地区！'}],
			area:[{required:true,message:'请填写所在地区！'}],
			address:[{required:true,message:'请填写详细地址！'}],
			
		},
		form: {
			id:'',
			status:AddressStatus.enable,
			address:'',
			province:'',
			city:'',
			area:'',
			isdefault:AddressIsdefault.yes,
			contactname:'',
			contactphone:'',
			shopid: user.shopId,
			shopName:user.shopName
		},
		pickAreaStr:'',
	})
	
	const pickAreaData = reactive({
		show:false
	})
	
	onLoad((options:any) => {
		if(options.info) {
			const info = util.getObjParams(options.info)
			uni.setNavigationBarTitle({
				title:'修改地址'
			})
			addressData.form = info
			addressData.pickAreaStr = info.province + info.city + info.area	
		} else {
			uni.setNavigationBarTitle({
				title:'新增地址'
			})
		}	
	})
	
	
	
	const addressAdd = () => {
		address.setAddressAdd(addressData.form).then((res: any) => {
			tip.showToast('保存成功！')
			uni.$emit('addressAdd')
			uni.navigateBack({delta:1})
		})
	}
	
	const addressEdit = () => {
		address.setAddressEdit(addressData.form).then((res: any) => {
			tip.showToast('修改成功！')
			uni.$emit('addressAdd')
			uni.navigateBack({delta:1})
		})
	}
	
	const changeDefault = (e: any) => {
		addressData.form.isdefault = e.detail.value?1:0
	}
	
	const save = () => {
		const rules = addressData.rules
		const form = addressData.form
		for(let i in rules) {
			for(let j in rules[i] ) {
				if(rules[i][j].required === true && !form[i]) {
					return tip.showToast(rules[i][j].message)
				}
			}
		}
		if(addressData.form.id) {
			addressEdit()
		} else {
			addressAdd()
		}
	}
	
	const changePickAreaShow = () => {
		pickAreaData.show = !pickAreaData.show
	}
	
	const pickArea = () => {
		changePickAreaShow()
	}
	
	const pickOne = (data: any) => {
		changePickAreaShow()
		addressData.form.province = data[0].value
		addressData.form.city = data[1].value
		addressData.form.area = data[2].value
		addressData.pickAreaStr = data[0].value + data[1].value + data[2].value
		
	}

</script>

<style lang="scss" scoped>
	.zh-address-add {
		.bottom-btn {
			margin-top:125rpx;
		}
	}
</style>

